/* pages/dispatch/dispatch.wxss */
/* pages/myCars/myCars.wxss */
@import "/style/common.wxss";

.dispatch-page {
  radio .wx-radio-input{
    width: 35rpx;
    height: 35rpx;
    line-height: 35rpx;
    border-radius: 3px;
    border-color: rgba(94, 37, 255, 1);
  }
  
  .banner-box {
    width: 100%;
    height: 190rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: #F1F1FF;

    // border:1px solid red;
    .content-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0 20rpx;
      // height: 330rpx;
      height: 210rpx;
      background: #F1F1FF;
      z-index: 2;
    }

    .nav-box {
      width: 70%;
      display: flex;
      align-items: center;

      .nav {
        width: 100%;
        height: 65rpx;
        display: flex;
        border-radius: 65rpx;
        align-items: center;
        background: white;
        // border: 1rpx solid #999999;
        padding: 0 10px;

        image {
          width: 35rpx;
          height: 35rpx;
        }

        input {
          flex: 1;
          font-size: 30rpx;
          margin-left: 20rpx;
          
        }
      }
    }

    .contain {
      margin-top: 15rpx;
      color: white;
      font-size: 32rpx;
      text-align: center;
      color: #333333;
      background: #F1F1FF;
      padding-bottom: 20rpx;
    }
  }

  .list-box {
    width: 100%;
    box-sizing: border-box;
    padding-top: 230rpx;

    .recycle-item {
      width: 100%;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      padding: 0 20rpx;

      .item-box {
        width: 100%;
        background: rgba(241, 241, 255, 1);
        border-radius: 6rpx;
        padding: 0 13rpx 13rpx;

        .top-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15rpx;

          &>view {
            font-size: 30rpx;

            &:first-of-type {
              font-weight: bold;
            }

            &:nth-of-type(2) {
              color: rgba(19, 31, 137, 1);
            }
          }
        }

        .content {
          background: white;
          border-radius: 4rpx;
          padding: 15rpx;

          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>view {
              font-size: 30rpx;
              margin-bottom: 5rpx;

              &:first-of-type {
                width: 140rpx;
                font-size: 28rpx;
                color: rgba(102, 102, 102, 1);
              }

              &:nth-of-type(2) {
                flex: 1;
              }
            }

            .btn {
              display: flex;
              align-items: center;
              border: 1rpx solid rgba(94, 37, 255, 1);
              padding: 10rpx 20rpx;
              border-radius: 12rpx;

              image {
                width: 30rpx;
                height: 30rpx;
              }

              text {
                margin-left: 10rpx;
                color: rgba(94, 37, 255, 1);
              }
            }
          }
        }

        .btn-box {
          display: flex;
          justify-content: flex-start;
          padding-top: 20rpx;
          padding-bottom: 7rpx;

          .line-btn {
            margin-right: 20rpx;
          }
        }
      }
    }
  }

  .mask {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;

    .form {
      width: 80%;
      background: white;
      border-radius: 12rpx;

      .title {
        padding: 30rpx;
        font-weight: bold;
      }

      .input-box {
        padding: 50rpx 50rpx;
        display: flex;
        align-items: center;

        input {
          border-radius: 65rpx;
          border: 1rpx solid #999999;
          padding: 0 30rpx;
          height: 65rpx;
          line-height: 65rpx;
        }
      }

      .btn-box {
        display: flex;

        &>view {
          flex: 1;
          text-align: center;
          padding: 30rpx 0;

          &:last-of-type {
            color: rgba(19, 31, 137, 1);
          }
        }
      }
    }
  }
}
.search-container {
  position: relative;
}

.search-input {
  width: 200px;
  height: 30px;
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin: 10rpx 0 10rpx 0;
}

.dropdown-list {
  position: absolute;
  left: 0;
  top: 40px;
  width: 200px;
  background-color: #fff;
  // border: solid 1px #ccc;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 999;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 8px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f2f2f2;
}

.list-container {
  padding: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.item-content {
  flex-grow: 1;
}

.radio-box {
  display: flex;
  align-items: center;
}